<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid black;
            margin: 10px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="txt">这是一个普通的div</div>
    </div>
    <div class="box">这是一个box</div>
</body>
<script>
    function fn() {
        //inserBefore(a,b) 把a放在b之前，函数由ab父元素调用
        let img = document.createElement('img')
        img.src = '../image/2.jpg'
        img.width = '100'
        //找到父级元素app  和txt  img必须存在不然会报错 第一个元素必须存在
        let app = document.querySelector('#app')
        let txt = document.querySelector('.txt')
        //插入操作
        function insert(el, el1) {
            //判断空
            if (el && el1.parentNode) {
                //insertBefore第一个参数不能为空，el！==null
                app.insertBefore(el, el1)
            }
        }
        insert(img, txt) //传递实参

    }
    fn();

    console.log(document.body); //body
    console.log(document.documentElement); //html


    let box = document.querySelectorAll('.box')
    //克隆另一个box 但是没有内容 js特性，浅克隆
    let box1 = box[0].cloneNode(true)
    box[0].after(box1)
    box = document.querySelectorAll('.box')
    for (let i = 0; i < box.length; i++) {
        box[i].onclick = function () {
            this.style.color = 'blue'
            this.style.backgroundColor = 'yellow'
        }
    }

</script>

</html>